<template>
  <div lang="SelectTenantryDialog">
    <el-dialog
      title="请选择租赁方"
      v-model="state.dialogVisible"
      width="782px"
      class="leaseHouseDialogPage"
      center
      :close-on-click-modal="false"
    >
      <div class="d-flex a-center j-sb m-b20">
          <div class="d-flex a-center">
              <label>客户姓名</label>
              <el-input
                      class="m-l5"
                      v-model="state.customerName"
                      clearable
                      placeholder="请输入客户姓名"
                      style="width: 300px;"
                      @input="queryCustomerName"
              >
              </el-input>
              <el-button
                      class="m-l5"
                      color="#FF7B50"
                      style="color: #fff"
                      @click="queryCustomerName"
              >查询</el-button>
          </div>
          <el-button
                  class="f-r"
                  color="#FF7B50"
                  style="color: #fff"
                  @click="goAddCustomer"
          >新增客户</el-button>
      </div>
      <el-table :data="state.tableData" border v-loading="tableLoadingFlag">
        <el-table-column type="index" label="序号" width="100" align="center" />
        <el-table-column prop="customerName" label="客户姓名" align="center" />
        <el-table-column prop="type" label="客户类型" align="center">
          <template #default="scope">
            <span v-if="scope.row.type == 0">企业</span>
            <span v-else>个人</span>
          </template>
        </el-table-column>
        <el-table-column prop="brandName" label="品牌名称" align="center" />
        <el-table-column prop="contactName" label="联系人" align="center" />
        <el-table-column
          prop="contactPhone"
          label="联系人电话"
          width="120"
          align="center"
        />
        <el-table-column label="操作" width="100" align="center" fixed="right">
          <template #default="scope">
            <el-button plain color="#FF7B50" @click="doSelect(scope.row)"
              >选择</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElTable, ElTableColumn, ElDialog } from "element-plus";
import { customerApi } from "@/api/assets";
import { useRouter } from "vue-router";
const router = useRouter();

const state = reactive({
  dialogVisible: false,
  tableData: [],
  newTableData:[],
  customerName:''
});

const tableLoadingFlag = ref(false);

const showTenantryDialog = () => {
  state.dialogVisible = true;
  let params = {
    pageNum: 1,
    pageSize: 9999,
    param: {},
  };
  tableLoadingFlag.value = true;
  customerApi.getCustomerPage(params).then((res) => {
    if (res.code == 200) {
      tableLoadingFlag.value = false;
      state.tableData = res.data.content;
      state.newTableData = res.data.content;
    }
  });
};

const emits = defineEmits(["getTenantryInfo"]);
const doSelect = (row) => {
  emits("getTenantryInfo", row);
  state.dialogVisible = false;
};
const goAddCustomer = () => {
  router.push({ path: "/asset/company/customerAdd" });
};

/**
 * 根据客户名称本地模糊查询
 */
const queryCustomerName = () => {
    if(state.customerName==='' || state.customerName.trim()===''){
        return  state.tableData = state.newTableData;
    }
    state.tableData =  state.newTableData.filter(item=>{
      if(item.customerName.indexOf(state.customerName) > -1){
          return item;
      }
  });
}

defineExpose({ showTenantryDialog });
</script>

<style lang="scss">
.SelectTenantryDialog {
  .el-dialog__header {
    padding-top: 18px;
    padding-bottom: 0;
    .el-dialog__title {
      font-size: 16px;
      font-weight: 500;
      color: #1a1a1a;
      font-family: SourceHanSansMedium;
    }
  }
  .el-dialog__body {
    padding-top: 25px;
    .el-table .el-table__header-wrapper .el-table__header .el-table__cell {
      padding: 20px 0;
      background: #f7f7fa;
      .cell {
        font-weight: 400;
        color: #4d4d4d;
      }
    }
  }
}
</style>
